<template>
	<view class="mainpadding">
		<view class="" style="padding-bottom: 180rpx;">
			<view class="">
				<u-swiper :list="dataAll.images_text" imgMode="widthFix" keyName="image_text" height="140" indicator
					circular></u-swiper>
				<view class="mainpadding ffffff" style="border-radius: 0 0 24rpx 24rpx;">
					<view class="flexbetween xiahuaxian ">
						<view class="titletext xiaohei fonweight">{{dataAll.name}}</view>
						<button open-type="share" hover-class="none">
							<u-icon name="share-square" color="#1D2129" size="28"></u-icon>
						</button>
					</view>
					<view class="flexleft margin_top">
						<view class="ershil xiaohei ">报名时间：</view>
						<view class="ershil xiaohei ">{{dataAll.bm_starttime_text}}</view>
					</view>
					<view class="flexleft margin_top">
						<view class="ershil xiaohei ">活动时间：</view>
						<view class="ershil xiaohei ">{{dataAll.bs_starttime_text}}</view>
					</view>
					<view class="flexbetween margin_top">
						<view class="flexleft">
							<view class="ershil xiaohei ">活动地址：</view>
							<view class="ershil xiaohei ">{{dataAll.address}}</view>
						</view>
						<image style="width: 40rpx;height: 40rpx;" src="../../static/image/system/dz.png" mode="" @click="openmap">
						</image>
					</view>
					<view class="flexleft margin_top">
						<view class="ershil xiaohei ">剩余名额：</view>
						<view class="ershil xiaocheng ">{{dataAll.success_join_num}}
							<text class="ershil xiaohei ">/{{dataAll.join_num}}</text>
						</view>
					</view>
					<view class="flexbetween margin_top">
						<view class="flexleft">
							<view class="ershil xiaohei ">联系人：</view>
							<view class="ershil xiaohei ">{{dataAll.username}}</view>
						</view>
						<view class="flexcenter"
							style="background-color: #00b42a;width: 40rpx;height: 40rpx;border-radius: 50%;"
							@click="callphone(dataAll.mobile)">
							<u-icon name="phone" color="#fff" size="18"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<!--  活动详情-->
			<view class="margin_top">
				<view class="flexleft">
					<view class="allline margin_right1"></view>
					<view class="sanshier xiaohei fonweight">活动详情</view>
				</view>
				<view class="margin_top">
					<u-parse :content="dataAll.content"></u-parse>
				</view>
			</view>
		</view>
		<view class="gudingdb ffffff mainpadding flexbetween">
			<view class="flexleft" @click="jumpurl('/pages/wode/huodongjl')">
				<image class="margin_right1" style="width: 48rpx;height: 48rpx;" src="../../static/image/system/hd.png"
					mode=""></image>
				<view class="sanshier xiaohei fonweight">我的活动</view>
			</view>
			<!-- activity_status,1未开始，2报名中，3活动待开始，4开始中，5已结束 -->
			<view class="ljbmbtn flexcenter" v-if="dataAll.activity_status==1" style="background-color: #f7ba1e;">未开始</view>
			<view class="ljbmbtn flexcenter" v-if="dataAll.activity_status==2 && dataAll.is_bm==0" @click="baoming">我要报名</view>
			<view class="ljbmbtn flexcenter" v-if="dataAll.activity_status==2 && dataAll.is_bm==1" style="background-color: #00b42a;">已报名</view>
			<view class="ljbmbtn flexcenter" v-if="dataAll.activity_status==3" style="background-color: #ffa126;">活动待开始</view>
			<view class="ljbmbtn flexcenter" v-if="dataAll.activity_status==4" style="background-color: #00b42a;">活动开始中</view>
			<view class="ljbmbtn flexcenter" v-if="dataAll.activity_status==5" style="background-color: #999;">活动已结束</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				listid: "",
				dataAll: {},
			}
		},
		onLoad(options) {
			this.listid = options.id
			this.getDetail()
		},
		onShareAppMessage: function(options) {
			return {
				title: '青年汇',
				imageUrl: '',
				path: '/pages/qingcanyu/huodongxq?id=' + this.listid
			}
		},
		onShareTimeline: function() {
			return {
				title: '青年汇',
				imageUrl: '',
				path: '/pages/qingcanyu/huodongxq?id=' + this.listid
			}
		},
		methods: {
			jumpurl(url){
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login"
					})
					return false
				}
				uni.navigateTo({
					url
				})
			},
			openmap(){
				uni.openLocation({
				     latitude: Number(this.dataAll.latitude),//即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
				     longitude:Number(this.dataAll.longitude),//即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
				     name: this.dataAll.address,//即将传到高德或腾讯地图的店铺名称
				     address: this.dataAll.address,//即将传到高德或腾讯地图的详细地址
				     scale: 18
				})
			},
			baoming(){
				if (!httpRequest.checkIsLogin()) {
					uni.navigateTo({
						url: "/pages/login"
					})
					return false
				}
				httpRequest.request('/api/activitycl/addActivityUser', 'GET', {
					id: this.listid,
				}).then(res => {
					httpRequest.toast(res.msg)
					if(res.code==1){
						this.getDetail()
					}
				}).catch(err => {})
			},
			getDetail() {
				httpRequest.request('/api/activitycl/activityDetail', 'GET', {
					id: this.listid,
				}).then(res => {
					uni.setNavigationBarTitle({
						title:res.data.name
					})
					res.data.content = res.data.content ? res.data.content.replace(/\<img/gi,
						'<img style="display:block" ') : "";
					this.dataAll = res.data
				}).catch(err => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ljbmbtn {
		width: 266rpx;
		height: 88rpx;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		background: #FF4609;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}
</style>